<template>
<el-container>
    <el-header><h1 class="title">{{list.title}}</h1></el-header>
    <div class="time">{{list.operateTime}}</div>
    <el-container>
        <el-aside width="150px" ></el-aside>
        <el-main>
            <el-card class="box-card" shadow="always">
                <div  class="text item">
                    {{list.content}}
                </div>
            </el-card>
        </el-main>
        <el-aside width="150px" ></el-aside>
    </el-container>
</el-container> 
</template>

<script>

import Pagination from '@/components/Pagination'
import { fetchDetailList } from '@/api/notice'


export default {
  name: 'noticeDetail',
  components: { Pagination },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id'
      },
    }
  },
  created() {
      const id = this.$route.params && this.$route.params.id
    this.getList(id)
  },
  methods: {
       getList(id) {
      this.listLoading = true
      fetchDetailList(id).then((response) => {
        this.list = response.data
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.title{
    text-align: center;

}
.time{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 50px;
   
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    
  }

</style>
